<div class="message-wrapper" [class]="messagePosition">
  <div *ngIf="currentConversationType === TIM.TYPES.CONV_C2C" class="c2c-layout"
    [class]="messagePosition">

    <div class="col-1" *ngIf="showAvatar">
      <!-- 头像 -->
      <im-avatar [src]="avatar"></im-avatar>
    </div>
    <div class="col-2">
      <!-- 消息主体 -->
      <div class="content-wrapper">
        <app-message-status-icon [message]="message" *ngIf="isMine"></app-message-status-icon>
        <app-text-element [isMine]="isMine" [message]="message" [payload]="message.payload"
          *ngIf="message.type === TIM.TYPES.MSG_TEXT"></app-text-element>

        <app-image-element [isMine]="isMine" [message]="message" [payload]="message.payload"
          *ngIf="message.type === TIM.TYPES.MSG_IMAGE"></app-image-element>

        <app-file-element [isMine]="isMine" [message]="message" [payload]="message.payload"
          *ngIf="message.type === TIM.TYPES.MSG_FILE"></app-file-element>
      </div>
      <app-message-footer *ngIf="showMessageHeader" [message]="message"></app-message-footer>
    </div>
    <div class="col-3">
      <!-- 消息状态 -->
    </div>
  </div>

  <div *ngIf="currentConversationType === TIM.TYPES.CONV_GROUP" class="group-layout"
    [class]="messagePosition">
    <!-- 头像 群组没有获取单个头像的接口，暂时无法显示头像-->
    <div class="col-1" *ngIf="showAvatar">
      <im-avatar class="group-member-avatar" [src]="avatar">
      </im-avatar>
    </div>
    <div class="col-2">
      <!-- 消息主体 -->
      <app-message-header *ngIf="showMessageHeader" [message]="message"
        [currentConversation]="currentConversation" [currentUserProfile]="currentUserProfile">
      </app-message-header>
      <div class="content-wrapper">
        <app-message-status-icon [message]="message" *ngIf="isMine"></app-message-status-icon>
        <app-text-element [isMine]="isMine" [message]="message" [payload]="message.payload"
          *ngIf="message.type === TIM.TYPES.MSG_TEXT"></app-text-element>
        <app-image-element [isMine]="isMine" [message]="message" [payload]="message.payload"
          *ngIf="message.type === TIM.TYPES.MSG_IMAGE"></app-image-element>
        <app-file-element [isMine]="isMine" [message]="message" [payload]="message.payload"
          *ngIf="message.type === TIM.TYPES.MSG_FILE"></app-file-element>
        <app-group-tip-element [isMine]="isMine" [message]="message" [payload]="message.payload"
          *ngIf="message.type === TIM.TYPES.MSG_GRP_TIP"></app-group-tip-element>
        <app-custom-element [isMine]="isMine" [message]="message" [payload]="message.payload"
          *ngIf="message.type === TIM.TYPES.MSG_CUSTOM"></app-custom-element>
      </div>
    </div>
    <div class="col-3">
      <!-- 消息状态 -->
    </div>
  </div>

  <div class="system-layout" *ngIf="currentConversationType === TIM.TYPES.CONV_SYSTEM">
    <div class="col-1">
      <im-avatar [src]="avatar" [type]="currentConversationType"></im-avatar>
    </div>
    <div class="col-2">
      <app-message-header *ngIf="showMessageHeader" [message]="message"
        [currentConversation]="currentConversation" [currentUserProfile]="currentUserProfile">
      </app-message-header>
      <app-group-system-notice-element [message]="message" [payload]="message.payload">
      </app-group-system-notice-element>
    </div>
  </div>
</div>
